<!DOCTYPE html>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  
  
  <!-- 关键字 keywords -->
  
  <meta name="keywords" content="天赐,天赐の小站,博客">
  
  
  <title itemprop="name">ES6语法指南 | 天赐の小站</title>
  
    <link rel="shortcut icon" href="//fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/custom/favicon.ico">
  
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" media="all">
  <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
  <link rel="stylesheet" id="saukra_css-css" href="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/css/style.css" type="text/css" media="all">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/css/lib.min.css" media="all">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/css/font.css" media="all">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/css/insight.css" media="all">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/css/jquery.fancybox.min.css" media="all">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/css/zoom.css" media="all">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/css/sharejs.css">
<!--   <link rel="stylesheet" id="saukra_css-css" href="https://2heng.xin/wp-content/cache/autoptimize/css/autoptimize_ad42a61f4c7d4bdd9f91afcff6b5dda5.css
" type="text/css" media="all"> -->
  <script>
  /*Initial Variables*/
  var mashiro_option = new Object();
  var mashiro_global = new Object();
  mashiro_option.NProgressON = true;
  /* 
   * 邮箱信息之类的东西可以填在这里，这些js变量基本都作用于sakura-app.js
   * 这样的设置仅是为了方便在基于PHP开发的主题中设置js变量，既然移植到了Node上，我想或许可以精简这一逻辑吧
   */
  mashiro_option.email_domain = "";
  mashiro_option.email_name = "";
  mashiro_option.cookie_version_control = "";
  mashiro_option.qzone_autocomplete = false;
  mashiro_option.site_name = "天赐の小站";
  mashiro_option.author_name = "天赐の小站";
  mashiro_option.site_url = "/";
  mashiro_option.v_appId = "VeenC2gYYyfSOq2rcCSmmruy-MdYXbMMI";
  mashiro_option.v_appKey = "F5kjyHdh4akqc7SDmfzQP8Qi";
  mashiro_option.v_notify = false;
  mashiro_option.v_verify = false;
  mashiro_option.v_placeholder = "你是我一生只会遇见一次的惊喜 ...";
  mashiro_option.v_avatar = "monsterid";
  mashiro_option.v_pageSize = "5" || 10;
  mashiro_option.mathjax = "0";
  mashiro_option.qq_api_url = "https://api.mashiro.top/qqinfo/"; 
  mashiro_option.qq_avatar_api_url = "https://api.mashiro.top/qqinfo/";

  // mashiro_option.jsdelivr_css_src = "https://cdn.jsdelivr.net/gh/moezx/cdn@3.4.5/css/lib.min.css";
  // mashiro_option.float_player_on = true;
  console.info("%c Blog %c", "background:#24272A; color:#ffffff", "", "https://blog.xiongtianci.com");
  console.info("%c GitHub %c", "background:#24272A; color:#ffffff", "", "https://github.com/tiancixiong");
  /*End of Initial Variables*/
  </script>
  <script type="text/javascript">
  var bg = "https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/5cm_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/5cm_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_04.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_05.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_06.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_07.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_08.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_09.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_10.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_11.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/A.Voyage.of.Chihiro_12.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Atonement_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Atonement_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Atonement_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Atonement_04.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Avatar_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Before.Sunrise_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Before.Sunrise_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Before.Sunset_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/bighero_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/bighero_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/bighero_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Coco_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Coco_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Coco_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/CUG.King.of.Heroes_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Digimon_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Digimon_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Digimon_04.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Digimon_05.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Digimon_06.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Digimon_07.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Digimon_08.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Digimon_09.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Friends_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Friends_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Friends_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Friends_04.webp,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Friends_05.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Harry.Potter_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Harry.Potter_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Harry.Potter_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Harry.Potter_04.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Harry.Potter_05.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Hauru.no.ugoku.shiro_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Into.the.Wild_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Kaze.tachinu_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/kiki_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/kiki_03.png,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/kiki_04.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/kiminona_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/kiminona_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/kiminona_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/kiminona_06.png,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/kiminona_07.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/koenokatachi_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/koenokatachi_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/koenokatachi_03.png,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Kotonoha.no.Niwa_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/La.La.Land_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Le.Petit.Prince_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Le.Petit.Prince_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Mimi.wo.sumaseba_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Mr.Bean.Holiday_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Mr.Bean.Holiday_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Mr.Bean.Holiday_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Mr.Bean.Holiday_04.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Mr.Bean.Holiday_05.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/My.Sassy.Girl_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Paperman_01.png,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Paperman_02.png,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Piper_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Ponyo_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Ponyo_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Ponyo_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Reply.1988_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Reply.1988_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Reply.1988_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/SpiderMan.Into.the.SpiderVerse_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/SpiderMan.Into.the.SpiderVerse_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/SpiderMan.Into.the.SpiderVerse_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/The.Girl.Who.Leapt.Through.Time_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/The.Pianist_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/TheLonelyAndGreatGod_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Titanic_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Titanic_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Titanic_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/totoro1.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/WALL_E_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/WALL_E_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Zootopia_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/2049.Blade.Runner_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/2049.Blade.Runner_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/American.Dreams.in.China_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Biri.Girl_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Bohemian.Rhapsody_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Bohemian.Rhapsody_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Bohemian.Rhapsody_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Crouching.Tiger.Hidden.Dragon.2000_01.webp,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Detachment_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Detachment_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Gisaengchung_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Iron.Man_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Kureyon.Shinchan_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Love.Actually_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Roman.Holiday_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Roman.Holiday_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Sherlock.S01_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/The.Secret.Life.of.Walter.Mitty_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Youth.Over.Flowers.in.Africa_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Youth.Over.Flowers.in.Africa_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/My.Mister_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/One.Day_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/One.Day_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/One.Day_03.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Ready.Player.One_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Begin.Again_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Begin.Again_02.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/Freddie_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/naruto.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/SetoNaikai_01.jpg,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/yexiu_01.png,https://cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/theme/cover/yexiu_02_FUJISKYTREE.png".split(",");
  var bgindex = Math.floor(Math.random()*bg.length);
  if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?
    alert('朋友，IE浏览器未适配哦~');
  }
  </script>
  <style type="text/css">
  .hljs-ln{border-collapse:collapse}.hljs-ln td{padding:0}.hljs-ln-n:before{content:attr(data-line-number)}
  </style>
  <style type="text/css">.site-top .lower nav{display:block !important;}.author-profile i,.post-like a,.post-share .show-share,.sub-text,.we-info a,span.sitename,.post-more i:hover,#pagination a:hover,.post-content a:hover,.float-content i:hover{color:#FE9600}.feature i,.download,.navigator i:hover,.links ul li:before,.ar-time i,span.ar-circle,.object,.comment .comment-reply-link,.siren-checkbox-radio:checked + .siren-checkbox-radioInput:after{background:#FE9600}::-webkit-scrollbar-thumb{background:#FE9600}.download,.navigator i:hover,.link-title,.links ul li:hover,#pagination a:hover,.comment-respond input[type='submit']:hover{border-color:#FE9600}.entry-content a:hover,.site-info a:hover,.comment h4 a,#comments-navi a.prev,#comments-navi a.next,.comment h4 a:hover,.site-top ul li a:hover,.entry-title a:hover,#archives-temp h3,span.page-numbers.current,.sorry li a:hover,.site-title a:hover,i.iconfont.js-toggle-search.iconsearch:hover,.comment-respond input[type='submit']:hover{color:#FE9600}.comments .comments-main{display:block !important;}.comments .comments-hidden{display:none !important;}background-position:center center;background-attachment:inherit;}
  </style>
</head>
</html>
<body class="page-template page-template-user page-template-page-analytics page-template-userpage-analytics-php page page-id-1297 chinese-font serif isWebKit">
  <div class="scrollbar" id="bar">
  </div>
  <a href="#" class="cd-top faa-float animated"></a>
  <section id="main-container">
    <div class="headertop filter-dot">
  <!--首页背景图下方的波浪线-->
  <!--<div id="banner_wave_1"></div>-->
  <!--<div id="banner_wave_2"></div>-->
  <figure id="centerbg" class="centerbg">
    <div class="focusinfo no-select">
      <div class="header-tou">
        <a href="/">
          <img src="https://fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/custom/avatar.jpg">
        </a>
      </div>
      <div class="header-info">
        <p>You Only Live Once</p>
        <div class="top-social_v2">
          <li id="bg-pre">
            <img class="flipx" src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/img/other/next-b.svg">
          </li>
          
            
              
                <li>
                  <a href="https://github.com/tiancixiong" target="_blank" class="social-github" title="github">
                    <img src="https://fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/social/github.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="mailto:support@xiongtianci.com" target="_blank" class="social-github" title="E-mail">
                    <img src="https://fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/social/email.svg">
                  </a>
                </li>
              
            
          
          <li id="bg-next">
            <img src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/img/other/next-b.svg">
          </li>
        </div>
      </div>
    </div>
  </figure>
  <div id="video-container" style="">
    <video style="object-fit: fill" id="bgvideo" class="video" video-name="" src="" width="auto" preload="auto">
    </video>
    <div id="video-btn" class="loadvideo videolive">
    </div>
    <div id="video-add">
    </div>
    <div class="video-stu">
    </div>
  </div>
  <div class="headertop-down faa-float animated" onclick="headertop_down()">
    <span>
      <i class="fa fa-chevron-down" aria-hidden="true">
      </i>
    </span>
  </div>
</div>
    <div id="page" class="site wrapper">
      <header class="site-header no-select gizle sabit" role="banner">
  <div class="site-top">
    <div class="site-branding">
      <span class="site-title">
        <span class="logolink moe-mashiro">
          <a href="/">
            <span class="sakurasono"></span>
            <span class="shironeko">天赐の小站</span>
          </a>
        </span>
      </span>
    </div>
    <div class="searchbox search-form-submit">
      <i class="iconfont js-toggle-search iconsearch icon-search">
      </i>
    </div>
    <div id="show-nav" class="showNav mobile-fit">
      <div class="line line1">
      </div>
      <div class="line line2">
      </div>
      <div class="line line3">
      </div>
    </div>
    <div class="lower-cantiner">
      <div class="lower">
        <nav class="mobile-fit-control hide">
          <ul id="menu-new" class="menu">
            
              <li>
                <a href="/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-fort-awesome faa-horizontal" aria-hidden="true"></i>
                    首页
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/archives">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-terminal faa-vertical" aria-hidden="true"></i>
                    极客
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/categories/技术/">
                          <i class="fa fa-code" aria-hidden="true"></i>
                          技术
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/Linux/">
                          <i class="fa fa-linux" aria-hidden="true"></i>
                          Linux
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/archives">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-slack faa-spin" aria-hidden="true"></i>
                    爱好
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/categories/电影/">
                          <i class="fa fa-film" aria-hidden="true"></i>
                          电影
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/日语/">
                          <i class="fa fa-language" aria-hidden="true"></i>
                          日语
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/archives">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-archive faa-ring" aria-hidden="true"></i>
                    归档
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/categories/生活/">
                          <i class="fa fa-file-text-o" aria-hidden="true"></i>
                          生活
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/随想/">
                          <i class="fa fa-commenting-o" aria-hidden="true"></i>
                          随想
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/资源/">
                          <i class="fa fa-cloud-download" aria-hidden="true"></i>
                          资源
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/转载/">
                          <i class="fa fa-book" aria-hidden="true"></i>
                          转载
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/comment/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
                    留言板
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/links/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
                    友人帐
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/donate/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-heart faa-burst" aria-hidden="true"></i>
                    赞赏
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-leaf faa-falling" aria-hidden="true"></i>
                    关于
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/about/">
                          <i class="fa fa-meetup" aria-hidden="true"></i>
                          我？
                        </a>
                      </li>
                    
                      <li>
                        <a href="/theme-sakura/">
                          <i class="fa iconfont icon-sakura" aria-hidden="true"></i>
                          主题
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/atom.xml">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-rss faa-passing" aria-hidden="true"></i>
                    RSS
                  </span>
                </a>
                
              </li>
            
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

      <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
<div class="pattern-center-blank"></div>

  <div class="pattern-center single-center">
    <!-- 有配图默认渲染第一张 -->
    <div class="pattern-attachment-img lazyload" style="background-image: url(https://images.unsplash.com/photo-1536308579640-741ebc243f62?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80);" src="https://fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://images.unsplash.com/photo-1536308579640-741ebc243f62?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80">
    </div>
    <header class="pattern-header single-header">
      <h1 class="entry-title">
      ES6语法指南</h1>
      <p class="entry-census">
        <span>
          <a href="https://www.xiongtianci.com">
            <img src="https://cdn.jsdelivr.net/gh/xiongtianci-tc/cdn@v1.0/img/custom/avatar.jpg">
          </a>
        </span>
        <span>
          <a href="https://www.xiongtianci.com">天赐</a>
        </span>
        <span class="bull">
        ·</span>
        2018-12-18<span class="bull">
        ·</span>
      <span id="busuanzi_value_page_pv"></span>次阅读</p>
    </header>
  </div>

<div id="content" class="site-content">
  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
      <article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
        <div class="toc"></div>
        <!--<div class="toc-entry-content"><!-- 套嵌目录使用（主要为了支援评论）-->
        
        <div class="entry-content">
          <blockquote>
<p>作者：<a href="http://www.ruanyifeng.com/" target="_blank" rel="noopener">阮一峰</a></p>
<p>链接：<a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">http://es6.ruanyifeng.com/</a></p>
</blockquote>
<h1 id="ES6-语法指南"><a href="#ES6-语法指南" class="headerlink" title="ES6 语法指南"></a>ES6 语法指南</h1><p>后端项目搭建完毕，接下来就是前端页面了。不过在这之前需要一些准备工作。我们需要学习ES6的语法标准。</p>
<p>什么是ES6？就是ECMAScript第6版标准。</p>
<h2 id="1-什么是ECMAScript？"><a href="#1-什么是ECMAScript？" class="headerlink" title="1.什么是ECMAScript？"></a>1.什么是ECMAScript？</h2><p>来看下前端的发展历程：</p>
<blockquote>
<p>web1.0时代：</p>
</blockquote>
<ul>
<li>最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。<strong>开发人员也只关心页面的样式和内容</strong>即可。</li>
</ul>
<blockquote>
<p>web2.0时代：</p>
</blockquote>
<ul>
<li>1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。</li>
<li>1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。</li>
<li>1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了<code>ECMAscript</code>标准规范。JavaScript和JScript都是<code>ECMAScript</code>的标准实现者，随后各大浏览器厂商纷纷实现了<code>ECMAScript</code>标准。</li>
</ul>
<p>所以，ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现。</p>
<h2 id="2-ECMAScript的快速发展"><a href="#2-ECMAScript的快速发展" class="headerlink" title="2.ECMAScript的快速发展"></a>2.ECMAScript的快速发展</h2><p>而后，ECMAScript就进入了快速发展期。</p>
<ul>
<li><p>1998年6月，ECMAScript 2.0 发布。</p>
</li>
<li><p>1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了。</p>
</li>
<li><p>2007年10月。。。。ECMAScript 4.0 草案发布。</p>
<p>这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。</p>
<ul>
<li>一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。</li>
<li>一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。</li>
</ul>
<p>ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的ECMAScript5和6版本中</p>
</li>
<li><p>2009年12月，ECMAScript 5 发布。</p>
</li>
<li><p>2011年6月，ECMAScript 5.1 发布。</p>
</li>
<li><p>2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。 </p>
</li>
</ul>
<h2 id="3-ES5和6的一些新特性"><a href="#3-ES5和6的一些新特性" class="headerlink" title="3.ES5和6的一些新特性"></a>3.ES5和6的一些新特性</h2><p>我们这里只把一些常用的进行学习，更详细的大家参考：<a href="http://es6.ruanyifeng.com/?search=reduce&amp;x=0&amp;y=0#README" target="_blank" rel="noopener">阮一峰的ES6教程</a></p>
<h3 id="3-1-let-和-const-命令"><a href="#3-1-let-和-const-命令" class="headerlink" title="3.1.let 和 const 命令"></a>3.1.let 和 const 命令</h3><blockquote>
<p>var</p>
</blockquote>
<p>之前，js定义变量只有一个关键字：<code>var</code></p>
<p><code>var</code>有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。</p>
<p>例如这样的一段代码：</p>
<pre><code class="js">for(var i = 0; i &lt; 5; i++){
    console.log(i);
}
console.log(&quot;循环外：&quot; + i)
</code></pre>
<p>你猜下打印的结果是什么？</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526107278999.png" alt="1526107278999"></p>
<blockquote>
<p>let</p>
</blockquote>
<p><code>let</code>所声明的变量，只在<code>let</code>命令所在的代码块内有效。</p>
<p>我们把刚才的<code>var</code>改成<code>let</code>试试：</p>
<pre><code class="js">for(let i = 0; i &lt; 5; i++){
    console.log(i);
}
console.log(&quot;循环外：&quot; + i)
</code></pre>
<p>结果：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526107347275.png" alt="1526107347275"></p>
<blockquote>
<p>const</p>
</blockquote>
<p><code>const</code>声明的变量是常量，不能被修改</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526107425000.png" alt="1526107425000"></p>
<h3 id="3-2-字符串扩展"><a href="#3-2-字符串扩展" class="headerlink" title="3.2.字符串扩展"></a>3.2.字符串扩展</h3><blockquote>
<p>新的API</p>
</blockquote>
<p>ES6为字符串扩展了几个新的API：</p>
<ul>
<li><code>includes()</code>：返回布尔值，表示是否找到了参数字符串。</li>
<li><code>startsWith()</code>：返回布尔值，表示参数字符串是否在原字符串的头部。</li>
<li><code>endsWith()</code>：返回布尔值，表示参数字符串是否在原字符串的尾部。</li>
</ul>
<p>实验一下：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526107640349.png" alt="1526107640349"></p>
<blockquote>
<p>字符串模板</p>
</blockquote>
<p>ES6中提供了`来作为字符串模板标记。我们可以这么玩：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526108070980.png" alt="1526108070980"></p>
<p>在两个`之间的部分都会被作为字符串的值，不管你任意换行，甚至加入js脚本</p>
<p>键盘是的1的左侧，tab的上侧，esc的正下方</p>
<h3 id="3-3-解构表达式"><a href="#3-3-解构表达式" class="headerlink" title="3.3.解构表达式"></a>3.3.解构表达式</h3><blockquote>
<p>数组解构</p>
</blockquote>
<p>比如有一个数组：</p>
<pre><code class="js">let arr = [1,2,3]
</code></pre>
<p>我想获取其中的值，只能通过角标。ES6可以这样：</p>
<pre><code class="js">const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
// 然后打印
console.log(x,y,z);
</code></pre>
<p>结果：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526109778368.png" alt="1526109778368"></p>
<blockquote>
<p>对象解构</p>
</blockquote>
<p>例如有个person对象：</p>
<pre><code class="js">const person = {
    name:&quot;jack&quot;,
    age:21,
    language: [&#39;java&#39;,&#39;js&#39;,&#39;css&#39;]
}
</code></pre>
<p>我们可以这么做：</p>
<pre><code class="js">// 解构表达式获取值
const {name,age,language} = person;
// 打印
console.log(name);
console.log(age);
console.log(language);
</code></pre>
<p>结果：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526109984544.png" alt="1526109984544"></p>
<p>如过想要用其它变量接收，需要额外指定别名：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526110159450.png" alt="1526110159450"></p>
<ul>
<li><code>{name:n}</code>：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。</li>
</ul>
<h3 id="3-4-函数优化"><a href="#3-4-函数优化" class="headerlink" title="3.4.函数优化"></a>3.4.函数优化</h3><blockquote>
<p>函数参数默认值</p>
</blockquote>
<p>在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：</p>
<pre><code class="js">    function add(a , b) {
        // 判断b是否为空，为空就给默认值1
        b = b || 1;
        return a + b;
    }
    // 传一个参数
    console.log(add(10));
</code></pre>
<p>现在可以这么写：</p>
<pre><code class="js">function add(a , b = 1) {
    return a + b;
}
// 传一个参数
console.log(add(10));
</code></pre>
<blockquote>
<p>箭头函数</p>
</blockquote>
<p>ES6中定义函数的简写方式：</p>
<p>一个参数时：</p>
<pre><code class="js">var print = function (obj) {
    console.log(obj);
}
// 简写为：
var print2 = obj =&gt; console.log(obj);
</code></pre>
<p>多个参数：</p>
<pre><code class="js">// 两个参数的情况：
var sum = function (a , b) {
    return a + b;
}
// 简写为：
var sum2 = (a,b) =&gt; a+b;
</code></pre>
<p>代码不止一行，可以用<code>{}</code>括起来</p>
<pre><code class="js">var sum3 = (a,b) =&gt; {
    return a + b;
}
</code></pre>
<blockquote>
<p>对象的函数属性简写</p>
</blockquote>
<p>比如一个Person对象，里面有eat方法：</p>
<pre><code class="js">let person = {
    name: &quot;jack&quot;,
    // 以前：
    eat: function (food) {
        console.log(this.name + &quot;在吃&quot; + food);
    },
    // 箭头函数版：
    eat2: food =&gt; console.log(person.name + &quot;在吃&quot; + food),// 这里拿不到this
    // 简写版：
    eat3(food){
        console.log(this.name + &quot;在吃&quot; + food);
    }
}
</code></pre>
<blockquote>
<p>箭头函数结合解构表达式</p>
</blockquote>
<p>比如有一个函数：</p>
<pre><code class="js">const person = {
    name:&quot;jack&quot;,
    age:21,
    language: [&#39;java&#39;,&#39;js&#39;,&#39;css&#39;]
}

function hello(person) {
    console.log(&quot;hello,&quot; + person.name)
}
</code></pre>
<p>如果用箭头函数和解构表达式</p>
<pre><code class="js">var hi = ({name}) =&gt;  console.log(&quot;hello,&quot; + name);
</code></pre>
<h3 id="3-5-map和reduce"><a href="#3-5-map和reduce" class="headerlink" title="3.5.map和reduce"></a>3.5.map和reduce</h3><p>数组中新增了map和reduce方法。</p>
<blockquote>
<p>map</p>
</blockquote>
<p><code>map()</code>：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。</p>
<p>举例：有一个字符串数组，我们希望转为int数组</p>
<pre><code class="js">let arr = [&#39;1&#39;,&#39;20&#39;,&#39;-5&#39;,&#39;3&#39;];
console.log(arr)

arr = arr.map(s =&gt; parseInt(s));

console.log(arr)
</code></pre>
<p>  <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526110796839.png" alt="1526110796839"></p>
<blockquote>
<p>reduce</p>
</blockquote>
<p><code>reduce()</code>：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：</p>
<ul>
<li>第一个参数是上一次reduce处理的结果</li>
<li>第二个参数是数组中要处理的下一个元素</li>
</ul>
<p><code>reduce()</code>会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数</p>
<p>举例：</p>
<pre><code>const arr = [1,20,-5,3]
</code></pre><p>没有初始值：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526111537204.png" alt="1526111537204"></p>
<p>指定初始值：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526111580742.png" alt="1526111580742"></p>
<h3 id="3-6-promise"><a href="#3-6-promise" class="headerlink" title="3.6.promise"></a>3.6.promise</h3><p>所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。</p>
<p>感觉跟java的Future类很像啊，有木有！</p>
<p>我们可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。</p>
<p>语法：</p>
<pre><code class="js">const promise = new Promise(function(resolve, reject) {
  // ... 执行异步操作

  if (/* 异步操作成功 */){
    resolve(value);// 调用resolve，代表Promise将返回成功的结果
  } else {
    reject(error);// 调用reject，代表Promise会返回失败结果
  }
});
</code></pre>
<p>这样，在promise中就封装了一段异步执行的结果。</p>
<p>如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现,语法：</p>
<pre><code class="js">promise.then(function(value){
    // 异步执行成功后的回调
});
</code></pre>
<p>如果想要处理promise异步执行失败的事件，还可以跟上catch：</p>
<pre><code class="js">promise.then(function(value){
    // 异步执行成功后的回调
}).catch(function(error){
    // 异步执行失败后的回调
})
</code></pre>
<p>示例：</p>
<pre><code>const p = new Promise(function (resolve, reject) {
    // 这里我们用定时任务模拟异步
    setTimeout(() =&gt; {
        const num = Math.random();
        // 随机返回成功或失败
        if (num &lt; 0.5) {
            resolve(&quot;成功！num:&quot; + num)
        } else {
            reject(&quot;出错了！num:&quot; + num)
        }
    }, 300)
})

// 调用promise
p.then(function (msg) {
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})
</code></pre><p>结果：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526113115887.png" alt="1526113115887"></p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526113140074.png" alt="1526113140074"></p>
<h3 id="3-7-set和map（了解）"><a href="#3-7-set和map（了解）" class="headerlink" title="3.7.set和map（了解）"></a>3.7.set和map（了解）</h3><p>ES6提供了Set和Map的数据结构。</p>
<p>Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。跟java很像吧。</p>
<p>构造函数：</p>
<pre><code class="js">// Set构造函数可以接收一个数组或空
let set = new Set();
set.add(1);// [1]
// 接收数组
let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]
</code></pre>
<p>普通方法：</p>
<pre><code>set.add(1);// 添加
set.clear();// 清空
set.delete(2);// 删除指定元素
set.has(2); // 判断是否存在
set.keys();// 返回所有key
set.values();// 返回所有值
set.entries();// 返回键值对集合
// 因为set没有键值对，所有其keys、values、entries方法返回值一样的。
set.size; // 元素个数。是属性，不是方法。
</code></pre><p>map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对象。即：</p>
<ul>
<li>object是 &lt;string,object&gt;集合</li>
<li>map是&lt;object,object&gt;集合</li>
</ul>
<p>构造函数：</p>
<pre><code class="js">// map接收一个数组，数组中的元素是键值对数组
const map = new Map([
    [&#39;key1&#39;,&#39;value1&#39;],
    [&#39;key2&#39;,&#39;value2&#39;],
])
// 或者接收一个set
const set = new Set([
    [&#39;key1&#39;,&#39;value1&#39;],
    [&#39;key2&#39;,&#39;value2&#39;],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map);
</code></pre>
<p>方法：</p>
<p> <img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1526114799767.png" alt="1526114799767"></p>
<h3 id="3-8-模块化"><a href="#3-8-模块化" class="headerlink" title="3.8.模块化"></a>3.8.模块化</h3><h4 id="3-8-1-什么是模块化"><a href="#3-8-1-什么是模块化" class="headerlink" title="3.8.1.什么是模块化"></a>3.8.1.什么是模块化</h4><p>模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。</p>
<p>而JS中没有包的概念，换来的是 模块。</p>
<p>模块功能主要由两个命令构成：<code>export</code>和<code>import</code>。</p>
<ul>
<li><code>export</code>命令用于规定模块的对外接口，</li>
<li><code>import</code>命令用于导入其他模块提供的功能。</li>
</ul>
<h4 id="3-8-2-export"><a href="#3-8-2-export" class="headerlink" title="3.8.2.export"></a>3.8.2.export</h4><p>比如我定义一个js文件:hello.js，里面有一个对象：</p>
<pre><code class="js">const util = {
    sum(a,b){
        return a + b;
    }
}
</code></pre>
<p>我可以使用export将这个对象导出：</p>
<pre><code class="js">const util = {
    sum(a,b){
        return a + b;
    }
}
export util;
</code></pre>
<p>当然，也可以简写为：</p>
<pre><code class="js">export const util = {
    sum(a,b){
        return a + b;
    }
}
</code></pre>
<p><code>export</code>不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。</p>
<p>当要导出多个值时，还可以简写。比如我有一个文件：user.js：</p>
<pre><code class="js">var name = &quot;jack&quot;
var age = 21
export {name,age}
</code></pre>
<blockquote>
<p>省略名称</p>
</blockquote>
<p>上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。</p>
<p>因此js提供了<code>default</code>关键字，可以对导出的变量名进行省略</p>
<p>例如：</p>
<pre><code class="js">// 无需声明对象的名字
export default {
    sum(a,b){
        return a + b;
    }
}
</code></pre>
<p>这样，当使用者导入时，可以任意起名字</p>
<h4 id="3-8-3-import"><a href="#3-8-3-import" class="headerlink" title="3.8.3.import"></a>3.8.3.import</h4><p>使用<code>export</code>命令定义了模块的对外接口以后，其他 JS 文件就可以通过<code>import</code>命令加载这个模块。</p>
<p>例如我要使用上面导出的util：</p>
<pre><code class="js">// 导入util
import util from &#39;hello.js&#39;
// 调用util中的属性
util.sum(1,2)
</code></pre>
<p>要批量导入前面导出的name和age： </p>
<pre><code class="js">import {name, age} from &#39;user.js&#39;

console.log(name + &quot; , 今年&quot;+ age +&quot;岁了&quot;)
</code></pre>
<p>但是上面的代码暂时无法测试，因为浏览器目前还不支持ES6 的导入和导出功能。除非借助于工具，把ES6 的语法进行编译降级到ES5，比如<code>Babel-cli</code>工具</p>
<p> 我们暂时不做测试，大家了解即可。</p>
<h3 id="3-9-对象扩展"><a href="#3-9-对象扩展" class="headerlink" title="3.9.对象扩展"></a>3.9.对象扩展</h3><p>ES6给Object拓展了许多新的方法，如：</p>
<ul>
<li>keys(obj)：获取对象的所有key形成的数组</li>
<li>values(obj)：获取对象的所有value形成的数组</li>
<li>entries(obj)：获取对象的所有key和value形成的二维数组。格式：<code>[[k1,v1],[k2,v2],...]</code></li>
<li><p>assian(dest, …src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）。</p>
<p><img src="//cdn.jsdelivr.net/gh/tiancixiong/BlogIMG@230521/blog/20181218/1527210872966.png" alt="1527210872966"></p>
</li>
</ul>
<h3 id="3-10-数组扩展"><a href="#3-10-数组扩展" class="headerlink" title="3.10.数组扩展"></a>3.10.数组扩展</h3><p>ES6给数组新增了许多方法：</p>
<ul>
<li>find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素</li>
<li>findIndex(callback)：与find类似，不过返回的是品牌到的元素的索引</li>
<li>includes（callback）：与find类似，如果匹配到元素，则返回true，代表找到了。</li>
</ul>

        </div>
        <!-- .entry-content -->
        <div class="single-reward">
          <div class="reward-open">赏<div class="reward-main">
              <ul class="reward-row">
                <li class="alipay-code"><img src="https://fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/custom/donate/AliPayQR.jpg"></li>
                <li class="wechat-code"><img src="https://fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/custom/donate/WeChanQR.png"></li>
              </ul>
            </div>
          </div>
        </div>
        <div style="text-align:center; width: 100%" class="social-share share-mobile" data-disabled="diandian, tencent"></div>
        <footer class="post-footer">
          <div class="post-lincenses"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="nofollow"><i class="fa fa-creative-commons" aria-hidden="true"></i> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a></div>
          <div class="post-tags">
          </div>
          <div class="post-share">
            <div class="social-share sharehidden share-component"></div>
            <i class="iconfont show-share icon-forward"></i>
          </div>
        </footer><!-- .entry-footer -->
      </article>
      <!-- #post-## -->
      <!--<div class="toc" style="background: none;"></div>-->
      <section class="post-squares nextprev">
        
          
            <div class="post-nepre half previous">
          
            <a href="/2018/12/19/为何short s1=1;是对的，而float f=3.4;是错的？/" rel="prev">
              <div class="background">
                <img class="lazyload" src="https://fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://images.unsplash.com/photo-1506594904809-53a92751f6db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;" onerror="imgError(this,3)" src="https://images.unsplash.com/photo-1506594904809-53a92751f6db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
              </div>
              <span class="label">
              Previous Post</span>
              <div class="info">
                <h3>
                为何short s1=1;是对的，而float f=3.4;是错的？</h3>
                <hr>
              </div>
            </a>
          </div>
        
        
          
            <div class="post-nepre half next">
          
            <a href="/2018/12/17/Intellij IDEA使用时的小技巧/" rel="next">
              <div class="background">
                <img class="lazyload" src="https://fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://images.unsplash.com/photo-1468428936365-099c2f70e495?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;" onerror="imgError(this,3)" src="https://images.unsplash.com/photo-1468428936365-099c2f70e495?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
              </div>
              <span class="label">
              Next Post</span>
              <div class="info">
                <h3>
                IntellijIDEA使用时的小技巧</h3>
                <hr>
              </div>
            </a>
          </div>
        
      </section>
      <!-- 评论插件valine -->

<div id="vcomments"></div>
<script>
  window.onload = function(){
      var valine = new Valine();
      valine.init({
        el: '#vcomments',
        appId: "VeenC2gYYyfSOq2rcCSmmruy-MdYXbMMI",
        appKey: "F5kjyHdh4akqc7SDmfzQP8Qi",
		notify: false,
		verify: false,
        path: window.location.pathname,
        placeholder: "你是我一生只会遇见一次的惊喜 ...",
		avatar: "monsterid",
		//meta: [nick,mail,link],
		visitor: true,
        recordIP: "true",
		pageSize: "5" || 10,
		serverURLs: "https://VeenC2gY.api.lncldglobal.com"
      });
	//增加以下六行代码去除 power by valine
    var infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
      infoEle.childNodes.forEach(function(item) {
        item.parentNode.removeChild(item);
      });
    }
  }
</script>

      <section class="author-profile">
        <div class="info" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
          <a href="https://www.xiongtianci.com" class="profile gravatar"><img src="https://cdn.jsdelivr.net/gh/xiongtianci-tc/cdn@v1.0/img/custom/avatar.jpg" itemprop="image" alt="天赐" height="70" width="70"></a>
          <div class="meta">
            <span class="title">Author</span>
            <h3 itemprop="name">
            <a href="https://www.xiongtianci.com" itemprop="url" rel="author">天赐</a>
            </h3>
          </div>
        </div>
        <hr>
        <p><i class="iconfont icon-write"></i>YOLO</p>
      </section>
    </main><!-- #main -->
  </div><!-- #primary -->
</div>


    </div>    
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="Type something..."/>
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            // PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
    <!-- <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2025 天赐<br>
      powered_by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer> -->
<footer id="colophon" class="site-footer" role="contentinfo">
	<div class="site-info">
		<div class="footertext">
			<div class="img-preload">
				<img src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@1.0/img/other/wordpress-rotating-ball-o.svg">
				<img src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@1.0/img/other/disqus-preloader.svg">
			</div>
			<p class="foo-logo"
				style="background-image: url('https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/img/custom/sakura.svg');">
			</p>
			<div
				style="background-image:linear-gradient(90deg,#6dba82 0,#07b39b 15%,#1098ad 30%,#5073b8 44%,#a166ab 58%,#ef4e7b 72%,#f37055 86%,#f79533 100%);background-size:cover;-webkit-background-clip:text;-webkit-text-fill-color:transparent;user-select:none;margin-top:0.7em;">
				<i>Tip: 本站电脑访问体验更佳耶&nbsp;<i class="fa fa-angellist" style="display:inline"></i></i>
			</div>
			<!-- color: #666666; -->
			<div style="color: #b9b9b9;">&copy;
				2018-2025&nbsp;天赐&nbsp;
			</div>
		</div>
		<!-- 访客统计 -->
		<!--<div id="busuanzi_container"></div>-->
		<!-- 已运行的时间-容器 -->
		<div id="days"></div>
		<div class="footer-device">
			<p id="footer-sponsor">
				<!-- <a href="https://pages.github.com/" target="_blank" alt="GitHub Pages" rel="nofollow"><img
						src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@1.0/img/logo/GitHub.svg" alt="GitHub Pages"
						style="height: 2em; max-height: 2em;" title=""></a>&nbsp;&nbsp;&nbsp; -->
				<!-- <a href="https://coding.net/pages" target="_blank" alt="Coding Pages" rel="nofollow"><img
						src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@1.0/img/logo/Coding.png" alt="Coding Pages"
						style="height: 1.3em; max-height: 1.3em;padding-bottom: 0px;margin-bottom: 0.35em;"
						title=""></a>&nbsp;&nbsp;&nbsp; -->
				<a href="https://www.jsdelivr.com/" target="_blank" alt="Free CDN" rel="nofollow"><img
						src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/img/logo/JsDelivr_Logo.svg" alt="jsDelivr"
						style="height: 2em; max-height: 2em;padding-bottom: 0px;"></a>&nbsp;&nbsp;&nbsp;<a
					href="https://www.google.com/intl/ja/analytics/" target="_blank" alt="Analytics solution"
					rel="nofollow"><img src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/img/logo/Google.svg"
						alt="Google Analytics" style="height: 1.7em; max-height: 1.7em;padding-bottom: 0px;"></a>
			</p>
		</div>
	</div>
	<!-- .site-info -->
</footer>

<!-- <script src="/js/tocbot.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/vendor/clipboard.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/InsightSearch.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/zoom.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/sakura-app.js"></script>
<!--浏览器搞笑标题-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/title_change.js"></script>-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/volantis.min.js"></script>
<!-- Valine -->
<!--<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>-->
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<!--<script src='//unpkg.com/valine@1.3.4/dist/Valine.min.js'></script>-->
<!--<script src="//unpkg.com/valine@1.3.7/dist/Valine.min.js"></script>-->
<!-- 不蒜子 网页计数器 -->
<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script> -->
<script type="text/javascript">
	/* <![CDATA[ */
	if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
		var Poi = {
			"pjax": "1",
			"movies": {
				"url": "https://cdn.jsdelivr.net/gh/tiancixiong/cdn@v3.0",
				"name": "/video/Unbroken.mp4",
				"live": "close"
			},
			"windowheight": "fixed",
			"codelamp": "close",
			"ajaxurl": "",
			"order": "asc",
			"formpostion": "bottom"
		};
	} else {
		var Poi = {
			"pjax": "1",
			"movies": {
				"url": "https://cdn.jsdelivr.net/gh/tiancixiong/cdn@v3.0",
				"name": "/video/Unbroken.mp4",
				"live": "open"
			},
			"windowheight": "auto",
			"codelamp": "close",
			"ajaxurl": "",
			"order": "asc",
			"formpostion": "bottom"
		};
	}
		/* ]]> */
</script>
<script>
	$(document).ready(function () {
		if ($(".toc").length > 0 && document.body.clientWidth > 1200) {
			if ($(".pattern-center").length > 0) { //有图的情况
				tocbot.init({
					// Where to render the table of contents.
					tocSelector: '.toc', // 放置目录的容器
					// Where to grab the headings to build the table of contents.
					contentSelector: '.entry-content', // 正文内容所在
					// Which headings to grab inside of the contentSelector element.
					scrollSmooth: true,
					headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
					headingsOffset: -400,
					scrollSmoothOffset: -85
				});
			} else {
				tocbot.init({
					// Where to render the table of contents.
					tocSelector: '.toc', // 放置目录的容器
					// Where to grab the headings to build the table of contents.
					contentSelector: '.entry-content', // 正文内容所在
					// Which headings to grab inside of the contentSelector element.
					scrollSmooth: true,
					headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
					headingsOffset: -85,
					scrollSmoothOffset: -85
				});
			}
			var offsetTop = $('.toc').offset().top - 95;
			window.onscroll = function () {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop >= offsetTop) {
					$('.toc').addClass('toc-fixed');
				} else {
					$('.toc').removeClass('toc-fixed');
				}
			}
		}
	});
</script>
<!-- 已运行的时间-js -->
<script>
	function show_date_time() {
		window.setTimeout("show_date_time()", 1000);
		// 获得建站时间
		var time = "28/11/2018 15:36:06";
		time = time.replace(/\//g, ':').replace(' ', ':');
		time = time.split(':');
		BirthDay = new Date(time[2], (time[1] - 1), time[0], time[3], time[4], time[5]);

		today = new Date();
		timeold = (today.getTime() - BirthDay.getTime());
		sectimeold = timeold / 1000
		secondsold = Math.floor(sectimeold);
		msPerDay = 24 * 60 * 60 * 1000
		msPerYear = 365 * 24 * 60 * 60 * 1000
		e_yearsold = timeold / msPerYear
		yearsold = Math.floor(e_yearsold);
		//e_daysold = timeold / msPerDay
		e_daysold = timeold/msPerDay - yearsold*365;
		daysold = Math.floor(e_daysold);
		e_hrsold = (e_daysold - daysold) * 24;
		hrsold = setzero(Math.floor(e_hrsold));
		e_minsold = (e_hrsold - hrsold) * 60;
		minsold = setzero(Math.floor((e_hrsold - hrsold) * 60));
		seconds = setzero(Math.floor((e_minsold - minsold) * 60));
		document.getElementById('days').innerHTML = "已在风雨中运行 " + yearsold + " 年 " + daysold + " 天 " + hrsold + " 小时 " + minsold + " 分 " + seconds + " 秒";
	}

	function setzero(i) {
		if (i < 10) {
			i = "0" + i
		};
		return i;
	}
	show_date_time();
</script>
<!-- 访客统计-js -->
<!--<script>
		if(true){
			document.getElementById('busuanzi_container').innerHTML="<span id=\"busuanzi_container_site_pv\">本站总访问量 <span id=\"busuanzi_value_site_pv\"></span> 次</span><span class=\"post-meta-divider\"> | </span><span id=\"busuanzi_container_site_uv\">本站访客数 <span id=\"busuanzi_value_site_uv\"></span> 人</span>";
		}else{
			document.getElementById('busuanzi_container').hidden;
		}
	</script>-->
<!-- 百度统计自动推送 -->
<!--<script>
	(function(){
		var bp = document.createElement('script');
		var curProtocol = window.location.protocol.split(':')[0];
		if (curProtocol === 'https') {
			bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
		}
		else {
			bp.src = 'http://push.zhanzhang.baidu.com/push.js';
		}
		var scriptList = document.getElementsByTagName("script");
		var s = scriptList[0];
		s.parentNode.insertBefore(bp, s);
	})();
	</script>
	-->
    <div class="openNav no-select" style="height: 50px;">
      <div class="iconflat no-select" style="width: 50px; height: 50px;">
        <div class="icon"></div>
      </div>
      <div class="site-branding search-form-submit">
        <i class="iconfont js-toggle-search iconsearch icon-search"></i>
      </div>
    </div>
  </section>
  
  <!-- 实现换肤功能 -->
  <div class="skin-menu no-select" id="mainskin"  style="position: fixed">
    <div class="theme-controls row-container">
        <ul class="menu-list">
            <li id="white-bg"><i class="fa fa-television" aria-hidden="true"></i></li>
            <li id="sakura-bg"> <i class="iconfont icon-sakura"></i></li>
            <li id="gribs-bg"> <i class="fa fa-slack" aria-hidden="true"></i></li>
            <li id="KAdots-bg"> <i class="iconfont icon-dots"></i></li>
            <li id="totem-bg"> <i class="fa fa-optin-monster" aria-hidden="true"></i></li>
            <li id="pixiv-bg"> <i class="iconfont icon-pixiv"></i></li>
            <li id="bing-bg"> <i class="iconfont icon-bing"></i></li>
            <li id="dark-bg"> <i class="fa fa-moon-o" aria-hidden="true"></i></li>
        </ul>
    </div>
</div>

<canvas id="night-mode-cover"></canvas>
<style>
#mainskin{
    position: fixed;
}
</style> 
  <div class="changeSkin-gear no-select">
    <div class="keys" id="setbtn"> <span id="open-skinMenu"> 切换主题 | SCHEME TOOL &nbsp;
	<i class="iconfont icon-gear inline-block rotating"></i> </span></div>
</div>
  
  <div id="mo-nav" class="">
  <div class="m-avatar">
    <img src="https://fastly.jsdelivr.net/gh/tiancixiong/cdn@v1.0/img/custom/avatar.jpg">
  </div>
  <p style="text-align: center; color: #333; font-weight: 900; font-family: 'Ubuntu', sans-serif; letter-spacing: 1.5px">天赐の小站</p>
  <p style="text-align: center; word-spacing: 20px;">
    
  </p>
  <ul id="menu-new-1" class="menu">
    
      <li>
        <a href="/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-fort-awesome faa-horizontal" aria-hidden="true"></i>
            首页
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/archives">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-terminal faa-vertical" aria-hidden="true"></i>
            极客
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/categories/技术/">
                  <i class="fa fa-code" aria-hidden="true"></i>
                  技术
                </a>
              </li>
            
              <li>
                <a href="/categories/Linux/">
                  <i class="fa fa-linux" aria-hidden="true"></i>
                  Linux
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/archives">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-slack faa-spin" aria-hidden="true"></i>
            爱好
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/categories/电影/">
                  <i class="fa fa-film" aria-hidden="true"></i>
                  电影
                </a>
              </li>
            
              <li>
                <a href="/categories/日语/">
                  <i class="fa fa-language" aria-hidden="true"></i>
                  日语
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/archives">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-archive faa-ring" aria-hidden="true"></i>
            归档
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/categories/生活/">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                  生活
                </a>
              </li>
            
              <li>
                <a href="/categories/随想/">
                  <i class="fa fa-commenting-o" aria-hidden="true"></i>
                  随想
                </a>
              </li>
            
              <li>
                <a href="/categories/资源/">
                  <i class="fa fa-cloud-download" aria-hidden="true"></i>
                  资源
                </a>
              </li>
            
              <li>
                <a href="/categories/转载/">
                  <i class="fa fa-book" aria-hidden="true"></i>
                  转载
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/comment/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
            留言板
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/links/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
            友人帐
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/donate/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-heart faa-burst" aria-hidden="true"></i>
            赞赏
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-leaf faa-falling" aria-hidden="true"></i>
            关于
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/about/">
                  <i class="fa fa-meetup" aria-hidden="true"></i>
                  我？
                </a>
              </li>
            
              <li>
                <a href="/theme-sakura/">
                  <i class="fa iconfont icon-sakura" aria-hidden="true"></i>
                  主题
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/atom.xml">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-rss faa-passing" aria-hidden="true"></i>
            RSS
          </span>
        </a>
        
      </li>
    
  </ul>
  <p style="text-align: center; font-size: 13px; color: #b9b9b9;">&copy 2019 hexo-sakura</p>
</div>
<button onclick="topFunction()" class="mobile-cd-top" id="moblieGoTop" title="Go to top" style="display: none;"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
  <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">-->
<!--<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/css/aplayer/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/aplayer/APlayer.min.js"></script>

<style>
  .aplayer .aplayer-lrc {
    height: 35px;
  }
  .aplayer .aplayer-lrc p{
    font-size: 16px;
    font-weight: 700;
    line-height: 18px !important;
  }
  .aplayer .aplayer-lrc p.aplayer-lrc-current{
    color: #FF1493;
  }
  /*.aplayer.aplayer-narrow .aplayer-body{
    left: -66px !important;
  }*/
  .aplayer.aplayer-fixed .aplayer-lrc {
    display: none;
  }
  .aplayer .aplayer-lrc.aplayer-lrc-hide {
      display:none !important;
  }
  .aplayer.aplayer-fixed .lrc-show {
    display: block;
    background: rgba(255, 255, 255, 0.8);
  }
</style>
<div class="aplayer"

    data-id="7040682880"

    data-server="tencent"

    data-type="playlist"

    data-fixed="true"

    data-autoplay="false"

    data-loop="all"

    data-order="random"

    data-preload="auto"

    data-volume="0.5"

    data-mutex="true"

    data-listFolded="false"

</div>
<!-- Meting 一个支持各种音乐平台(腾讯、网易...)的音乐 API 框架 -->
<!--<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/gh/tiancixiong/cdn@sakura-theme/js/aplayer/Meting.min.js"></script>
<script>
  $(function(){
    $('body').on('click', '.aplayer', function(){
      if($('.aplayer-button').hasClass('aplayer-play')) {
        $('.aplayer-lrc').removeClass('lrc-show');
      } else {
        $('.aplayer-lrc').addClass('lrc-show');
      }
    })
  });
</script>
</body>
</html>